<template>
  <div class="card art-custom-card">
    <div class="card-header">
      <div class="title">
        <h4 class="box-title">推广计划（级别：{{ props.levelList.levelName }}）</h4>
      </div>
    </div>
    <ArtTable class="table" :data="tableData" style="width: 100%" size="large" :border="false" :stripe="false"
      :header-cell-style="{ background: 'transparent' }">
      <template #default>
        <el-table-column label="套餐名称" prop="name" align="center" />
        <el-table-column label="首年佣金比例" prop="firstRate" align="center" />
        <el-table-column label="续费佣金比例" prop="renewRate" align="center" />
      </template>
    </ArtTable>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  levelList: {
    type: Object,
    default: () => (() => { })
  }
})

const tableData = [
  {
    name: '基础版',
    firstRate: props.levelList.basicFirstRate / 100 + '%',
    renewRate: props.levelList.basicRenewRate / 100 + '%'
  },
  {
    name: '专业版',
    firstRate: props.levelList.proFirstRate / 100 + '%',
    renewRate: props.levelList.proRenewRate / 100 + '%'
  },
  {
    name: '旗舰版',
    firstRate: props.levelList.ultimateFirstRate / 100 + '%',
    renewRate: props.levelList.ultimateRenewRate / 100 + '%'
  }
]

</script>

<style lang="scss">
.card {

  // 进度动画
  .el-progress-bar__inner {
    transition: all 1s !important;
  }

  .el-radio-button__original-radio:checked+.el-radio-button__inner {
    color: var(--el-color-primary) !important;
    background: transparent !important;
  }
}
</style>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 510px;
  overflow: hidden;

  .card-header {
    padding-left: 15px !important;

    .title {
      h4 {
        font-weight: 700 !important;
      }
    }
  }

  :deep(.el-table__body tr:last-child td) {
    border-bottom: none !important;
  }

  .avatar {
    width: 36px;
    height: 36px;
    border-radius: 6px;
  }

  .user-name {
    margin-left: 10px;
  }
}
</style>
